<template>
    <div class="cardItem">
        <div class="title">{{ props.data.title }}</div>
        <div class="numBox">
            <el-icon :size="35" :color="props.data.iconColor">
                <!-- 使用插槽获取父元素给的结构来决定展示的图标 -->
                <slot></slot>
            </el-icon>
            <text class="dataNum">{{ props.data.dataNum }}</text>
        </div>
    </div>
</template>

<script setup>
import { defineProps } from 'vue'
/*
    数据格式：{ title: xxx, dataNum: xxx, iconColor: xxx }
*/
// 获取父组件数据
const props = defineProps({
    data: {
        type: Object,
        default: () => ({
            title: '标题',
            dataNum: 0,
            iconColor: '#191919'
        })
    }
})
</script>

<style lang="scss" scoped>
.cardItem {
    height: 100%;
    width: 100%;
    border-radius: 20px;
    border: .5rem solid #191919;
    margin: 0 2rem;
    padding: 0 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.title {
    white-space: nowrap;
    font-size: 2rem;
    font-weight: 600;
}

.numBox {
    margin: 2rem 0;
    padding-left: 2rem;
    display: flex;
}

.dataNum {
    margin-left: 1rem;
    font-size: 5rem;
    line-height: 5rem;
    font-weight: 800;
}
</style>